<template>
  <div class="message-box">
    <p>{{message}}</p>
  </div>
</template>

<script>
  export default {
    name: 'Tips',
    data() {
      return {
        message: '测试信息'
      }
    },
    mounted() {
      setTimeout(() => {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      }, 2000)
    },
    
  }
</script>

<style lang="stylus" scoped>
.message-box
  display: flex
  justify-content: center
  align-items: center
  position: fixed
  top 0px
  left 0px
  z-index: 9999
  background transparent
  height: 100vh
  width: 100vw
  background-color: rgba(17,17,17,.3)
  p
    padding 12px 20px
    font-size: 18px
    border-radius: 4px
    color #fff
    background-color: rgba(17,17,17,.7)
</style>